<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳动的心形</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="beating-heart"></div>

<!--<script src="script.js">-->
<script>
    // script.js
document.addEventListener('DOMContentLoaded', function() {
  var heart = document.getElementById('beating-heart');

  // 可以添加事件监听来控制动画
  // 例如，点击心形开始/停止动画
  heart.addEventListener('click', function() {
    var isPaused = heart.style.animationPlayState === 'paused';
    heart.style.animationPlayState = isPaused ? 'running' : 'paused';
  });
});
</script>
</body>
</html>


<style>
    /* styles.css */
#beating-heart {
  position: relative;
  width: 200px;
  height: 200px;
  animation: beat 1s infinite;
}

/* 心形的制作 */
#beating-heart:before,
#beating-heart:after {
  position: absolute;
  content: "";
  left: 50%;
  top: 0;
  width: 100px;
  height: 150px;
  background: red;
  border-radius: 100px 100px 0 0;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: 0 100%;
}

#beating-heart:after {
  transform: translateX(-50%) rotate(45deg);
}

/* 动画效果 */
@keyframes beat {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>